在一開始分享AngularJS 主題的時候，有介紹到AngularJS 是遵循MVC 框架。

Day3的內容： http://ithelp.ithome.com.tw/question/10133017

而這篇是根據近期工作的心得，重新整理關於AngularJS MVC的一些想法。
angularJS的特性是遵循MVC框架。

view是用來顯示資料

model是用來存放資料

controller是用來建立view與model之間的行為，處理事件。

我們在正式執行專案的時候，
不能僅為了畫面上的結果而去建立事件。
而是應該考慮實際上post頁面對應的資料，去做內容的建置。

避免到時候前端串的資料和後端傳入的格式不同，導致”重工“與費時的現象。

應該利用angular資料綁定的特性，
盡量思考哪些項目，僅需使用view和model 即可完成目的。

例如：我們需要一個下拉選單去獲取下拉選單的值，

<select ng-model="Select1" ng-options="lottery.ProductName for lottery in lotteryModel">

我們可以直接使用ng-model去做資料綁定。

ng-model="Select1"

就可以透過綁定的特性，直接獲得選單內容

{{ Select1.ProductName }}

範例： http://jsbin.com/oQEnaKE/1/edit

不需要再增加一個ng-change的指令去判斷是否改變選單內容後，再去抓取下拉選單的值。

例如：

<select ng-model="SelectCity" ng-change="cityChange()" ng-options="a.city for a in address">

範例： http://jsbin.com/inafuw/14/edit

哪些是不能僅依靠資料綁定就能完成，必須要使用controller去處理的情況？
像是：

1. 非網頁元素，無法綁定，需要靠controller
2. 按鈕也需要靠controller去執行觸發的事件。

固定的靜態資料也可以直接寫死在html，不一定所有資料一定要寫在js裡面。

要記得不是所有資料都需要做綁定，每bind一次，就是耗損一次效能。

小結：

1. 事先將前端與後端資料格式規劃一致

避免前端的資料需要重複組裝對應。

2. 在對的地方、做對的事情

如果可以直接使用ng-model做資料綁定，
就不需要建立事件在獲取綁定的內容。

3. 思考angular資料綁定的特性，確定執行方向

不一定所有view和model都需要建立事件，
不一定所有資料都需要綁定資料。

---------------入門AngularJS筆記---------------

Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193

Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147

Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067

Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851

Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721

Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381

Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077

Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014

Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821

Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627

Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409

Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781

Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625

Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296

Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841

Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545

Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011

Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776

Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378

Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889

Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415

Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625

Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576

Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017

Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601

Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196